<template>
  <scroll-box class="file" listenHeight topDisabled :bottomDisabled="disabled" @touchBottom="getFileList(fileList[fileList.length-1][fileList[fileList.length-1].length-1].createdAt)">
    <div class="file-group" v-for="item in fileList" :key="item[0].createdAt">
      <div class="group-date">{{item[0].createdAt | timeHandler(that)}}</div>
      <div class="group-container">
        <div class="group-item" v-for="i in item" :key="i.createdAt" :title="`大小: ${i.size} B\n创建时间戳: ${i.createdAt}\n地址: ${i.src}`">
          <div class="item-cover">
            <img v-if="i.type === 1" :src="i.src" alt="" @click.stop="(e)=>{$bus.$emit('viewPicture', e.target)}">
            <img v-else-if="i.type === 2" :src="require('@/assets/img/fileImg.png')" alt="">
          </div>
          <div class="file-name">{{ i.fileName }}</div>
        </div>
      </div>
    </div>
    <loading class="loading" v-show="!disabled"></loading>
  </scroll-box>
</template>

<script>
import { api_getFileList } from '@/api/files'
import ScrollBox from '@/components/ScrollBox.vue'
import Loading from '@/components/Loading.vue'

export default {
  components: { ScrollBox, Loading },
  name: 'file-page',
  data () {
    return {
      fileList: [],
      // 禁止加载新数据
      disabled: false,
      that: this,
    }
  },
  created () {
    this.getFileList()
  },
  methods: {
    // 请求文件列表
    getFileList (lastTime) {
      this.disabled = true
      api_getFileList({ lastTime }).then(res => {
        if (res.data.code === 200) {
          // console.log(res.data.list);
          // this.getFileList(res.data.list)
          this.groupByTime(res.data.list)
          this.disabled = res.data.list.length < 30
        }
      })
    },

    // 将新增列表按照时间进行分组
    groupByTime (newList) {
      newList.forEach(item => {
        if (!this.fileList.length) {
          this.fileList.push([item])
        } else {
          let time = this.fileList[this.fileList.length - 1][0].createdAt
          if (this.$moment(time * 1).isSame(this.$moment(item.createdAt * 1), 'date')) {
            this.fileList[this.fileList.length - 1].push(item)
          } else {
            this.fileList.push([item])
          }
        }
      })
    },

  },
  filters: {
    timeHandler (time, that) {
      return that.$moment(time * 1).format('yyyy-MM-DD')
    }
  }
}
</script>

<style scoped>
.file {
  padding: 10px 30px;
  height: 100vh;
  width: 100%;
  overflow: auto;
}

.group-date {
  text-align: left;
  font-weight: 600;
  font-size: 19px;
  margin: 20px 10px 2px;
}

.group-container {
  display: flex;
  flex-wrap: wrap;
}

.group-item {
  width: 90px;
  text-align: center;
  overflow: hidden;
  margin: 10px 5px;
  cursor: pointer;
}

.file-name {
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.item-cover img {
  border-radius: 5px;
  height: 70px;
  width: 70px;
  object-fit: cover;
}

.loading {
  margin: 10px 0;
}
</style>